
/* 普通注释  会保留到编译后的文件 */
// 静默注释  只保留在SASS源文件中，编译后被省略

@use "sass:math";

@import "base.scss";
@import "reset.scss";


body{
    font-size: $defaultFontSize;
}

.w{
    width: $centerWidth;
    margin: 0 auto;
}

.navBar li+li{
    // 插值语句 可以拼接变量 到 选择器,属性名,属性值
    border-#{$side}: 0;
}


// $main:main;
// .#{$main}-nav{
//     width: 100px;
// }
// .#{$main}-nav-sub{
//     width: 100px;
// }

.main{
    width: 400px;

    &-nav{
        width: 200px;

        &-sub{
            width: 100px;
          
        }

    }
}



// sass计算功能
// 加法  数值相加单位保留(单位相同)
// 减法  数值相减单位保留(单位相同)
// 乘法  数值相乘单位保留(一个有单位 一个没有单位)
// 除法  a. 数值相除单位保留(一个有单位 一个没有单位)
//       b. 数值相除 单位舍去(两个单位相同)


.swiperBar {
    width: $centerWidth*5;
    width: 100px + 20px;
    width: 200px - 20px - 2px; 
    width: 100px * 5;
    // width: (1500px/3);   //老版本
    width: math.div(1500px,3);
    // width: math.div(1500px,3px);
}
#app{
    width: pxToRem(750px);
}



// 嵌套语法
// & 父选择器修饰符

// > 子选择器
// + 相邻兄弟选择器 

// .header .navBar li:hover{}




.box{
    width: 400px;
    height: 400px;
    position: relative;

    @include compa(box-shadow, 1px 1px 0px rgba(0,0,0,0.5));

    .sub{
        width: 200px;
        height: 200px;
        @include PosCenter(2);
    }
}

.header{
    height: 45px;
    background-color: $success;
    @include typeArea();


    .navBar{
        float:  left;
        line-height: 45px;

        
        & > li{
            padding: 0 20px;
            float: left;
            position: relative;

            .subNav{
                position: absolute;
                width: 200px;
                display: none;
            }
            
            &:hover{
                background-color:$warm;

                .subNav{
                    display: block;
                }
            }

            
        }
    }

    .searchBar{
        float: right;
        margin-right: 5px;
        margin-top: 5px;
        
        .searchCon,.searchBtn{
            float: left;
        }
        .searchCon{
            width: 200px-2;
            height: 35px-2;
            padding: 0;
            border: 1px solid transparent;
            border-right: 0;
            outline: none;
            text-indent: 10px;
            // .searchCon:focus{}

            // -ms-transition: border-color 0.5s 0s linear;
            // -moz-transition: border-color 0.5s 0s linear;
            // -webkit-transition: border-color 0.5s 0s linear;
            // transition: border-color 0.5s 0s linear;

            @include compa(transition, border-color 0.5s 0s linear);

            &:focus{
                border-color: $hot;
                
                // .searchCon:focus + .searchBtn{}
                & + .searchBtn{
                    border-color: $hot;
                }
            }

            
        }   
        .searchBtn{
            float: left;
            width: 35px-2;
            height: 35px-2;
            border: 1px solid transparent;
            background-color: $lightGrey;
            transition: border-color 0.5s 0s;
        }
    }
}


